<template>
	<view class="container">
		<view class="video">

		</view>
		<view class="">
			<view class="bindId">
				绑定视频号ID
			</view>
			<view class="tips">
				<text>如果还没有橱窗，请先开通橱窗</text>
				<text @click="open">橱窗开通教程</text>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popupCard">
				<view class="top">
					<input type="text" placeholder="请输入视频号ID" />
					<text>绑定</text>
				</view>
				<view class="tips">
					<text>如果还没有橱窗，请先开通橱窗</text>
					<text @click="open">橱窗开通教程</text>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popupCenter" type="center">
			<view class="popupCenter">
				<view class="top">
					你已绑定视频号
				</view>
				<view class="btnList">
					<text>去选品</text>
					<text>关闭</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onShow() {

		},
		methods: {
			open() {
				this.$refs.popupCenter.open('center')
			}
		}
	}
</script>
<style>
	page {
		background-color: rgba(246, 247, 248, 1);
	}
</style>

<style lang="less" scoped>
	.container {
		padding: 30rpx;

		.popupCenter {
			box-sizing: border-box;
			padding: 40rpx;
			width: 590rpx;
			height: 264rpx;
			border-radius: 24rpx;
			background: linear-gradient(180deg, rgba(255, 222, 181, 1) 0%, rgba(255, 246, 235, 1) 53.72%, rgba(255, 255, 255, 1) 100%);

			.btnList {
				display: flex;
				align-items: center;
				margin: 0 70rpx;

				text {
					border-radius: 40rpx;
					font-size: 32rpx;
					font-weight: 700;
					line-height: 80rpx;
					height: 80rpx;
					text-align: center;

					&:first-child {
						width: 222rpx;
						background: rgba(255, 127, 6, 1);
						color: rgba(255, 255, 255, 1);
						margin-right: 40rpx;
					}

					&:last-child {
						width: 184rpx;
						color: rgba(106, 106, 106, 1);
						border: 1rpx solid rgba(106, 106, 106, 1);
					}
				}
			}

			.top {
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(42, 42, 42, 1);
				text-align: center;
				margin-bottom: 60rpx;
			}
		}

		.popupCard {
			background-color: #fff;
			padding: 70rpx 30rpx;
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.top {
				display: flex;
				align-items: center;
				margin-bottom: 50rpx;

				input {
					width: 506rpx;
					height: 80rpx;
					opacity: 1;
					border-radius: 40rpx;
					background: rgba(241, 241, 241, 1);
					padding: 0 30rpx;
					margin-right: 20rpx;
				}

				text {
					display: inline-block;
					width: 160rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					border-radius: 40rpx;
					background: rgba(255, 127, 6, 1);
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(255, 255, 255, 1);
				}
			}

		}

		.tips {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 33.6rpx;
			color: rgba(42, 42, 42, 1);

			text {
				&:last-child {
					color: rgba(42, 130, 228, 1);
					margin-left: 30rpx;
				}
			}
		}

		.bindId {
			width: 312rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 40rpx;
			background: rgba(255, 127, 6, 1);
			margin: 50rpx auto;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}

		.video {
			width: 686rpx;
			height: 770rpx;
			opacity: 1;
			border-radius: 8rpx;
			background: rgba(204, 204, 204, 1);
		}
	}
</style>